<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文章类别管理</title>
<!-- layui -->
<link rel="stylesheet" href="../webjars/layui/2.5.6/css/layui.css"
	media="all">
	
<!-- vue -->
<script type="text/javascript"src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script type="text/javascript"src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="../webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
</head>
<body>

<div id="managecate">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>新增类别</legend>
</fieldset>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">新增类别名</label>
    <div class="layui-input-block">
      <input type="text" v-model="ad.cname" name="name" lay-verify="title" autocomplete="off" placeholder="请输入类别名" class="layui-input" >
    </div>
  </div>



<div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" @click="add">新增</button>
    </div>
  </div>
</form>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>修改类别</legend>
</fieldset>

<form class="layui-form" action="" id="form">



 <div class="layui-form-item">
    <label class="layui-form-label">类别名</label>
    <div class="layui-input-block">
      <input v-model="de.cname" type="text" name="name1" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" >
    </div>
    
</div>


<div class="layui-form-item">
    <label class="layui-form-label">类别ID:</label>
    <div class="layui-input-block">
      <input v-model="de.cid" type="text" name="id" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" readonly="readonly">
    </div>
    
</div>


<div class="layui-form-item">
    <div class="layui-input-block">
      <button @click="updatecate" type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
       <button @click="deletecate" type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">删除</button>
    </div>
</div>
 
 <div class="layui-form">
  <table class="layui-table">
    <colgroup>
      <col width="150">
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>类别ID</th>
        <th>类别名</th>
      </tr> 
    </thead>
    <tbody @click="getval(c.cname,c.cid)" v-for="c in list">
      <tr>
        <td>{{c.cid}}</td>
        <td>{{c.cname}}</td>
      </tr>
    </tbody>
  </table>
</div>
  

</form>

</div>



<script type="text/javascript">
var vc=new Vue({
	el :"#managecate",
	data :{
		list :[],
		ad :{
			cname :""
		},
		de :{
			cid:"",
			cname :""
		}
	},
	created(){
			axios.get("../category.s").then(res=>{
				this.list=res.data;
				console.info(this.list)
			});
	},
	methods : {
		add(){
			var params=new URLSearchParams();
			params.append("cname",this.ad.cname);
			axios.post("../category/addcategory.s",params).then(res=>{
				this.ad.cname=res.data.cname;
				if(res.data.code==1){
					alert(res.data.msg);
				}else{
					alert(res.data.msg);
				}
			})
		},
		getval(mg,id){
			this.de.cid=id;
			this.de.cname=mg;
		},
		deletecate(){
			var params=new URLSearchParams();
			params.append("cname",this.de.cname);
			axios.post("../category/deletecategory.s",params).then(res=>{
				this.de.cname=res.data.cname;
				if(res.data.code==1){
					alert(res.data.msg);
				}else{
					alert(res.data.msg);
				}
			});
		},
		updatecate(){
			var params=new URLSearchParams();
			params.append("cname",this.de.cname);
			params.append("cid",this.de.cid);
			axios.post("../category/updatecategory.s",params).then(res=>{
				this.de.cname=res.data.cname;
				this.de.cid=res.data.cid;
				if(res.data.code==1){
					alert(res.data.msg);
				}else{
					alert(res.data.msg);
				}
			});
		},
	},
});

</script>

<script type="text/javascript">
layui.form.render();
</script>
</body>
</html>